<template>
    <div class="editShop">
        <h1>{{$route.meta.title}}</h1>
        <el-form label-position="right" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="data.name"></el-input>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input v-model="data.subtitle"></el-input>
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select v-model="value" popper-class="active" placeholder="请选择" @change="changeSelect">
                    <el-option v-for="item in option" :label="item.name" :value="item.id" :key="item.value">{{item.name}}
                    </el-option>
                </el-select>
                <el-select v-if="second.length" v-model="value2" popper-class="active" placeholder="请选择">
                    <el-option v-for="item in second" :label="item.name" :value="item.id" :key="item.value">{{item.name}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="data.price" type="number">
                    <el-button slot="append">元</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="商品库存">
                <el-input v-model="data.stock" type="number">
                    <el-button slot="append">件</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="商品图片">
                <div class="img">
                    <div v-for="(item,index) in imgUrl" :key="index" class="img-item">
                        <el-image :src="item">
                        </el-image>
                        <span class="el-icon-delete" @click="del(index)"></span>
                    </div>
                </div>

                <el-upload class="upload-demo" :show-file-list="false" name="upload_file" action="/api/product/upload.do" :on-success="success" multiple>
                    <el-button size="small" type="primary">上传文件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品详情">
                <quill-editor v-model="data.detail" :options="editorOption" style="height:200px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="send">提交</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { addShop, editShop } from "@/utils/api";
export default {
    data() {
        return {
            data: {
                subImages: "",
            },
            option: [],
            second: [],
            value: "请选择一级品类",
            value2: "请选择二级品类",
            editorOption: {},
            imgUrl: [],
        };
    },
    created() {
        //   一级品类
        addShop(0).then((res) => {
            this.option = res.data.data;
        });
    },
    methods: {
        changeSelect() {
            addShop(this.value).then((res) => {
                this.second = res.data.data;
            });
        },
        success(response) {
            if (!this.data.subImages) {
                this.data.subImages = response.data.uri;
            } else {
                this.data.subImages = this.data.subImages.concat(
                    "," + response.data.uri
                );
            }
            this.imgUrl.push(response.data.url);
        },
        del(i) {
            let arr = this.data.subImages.split(",");
            arr.splice(i, 1);
            this.data.subImages = arr.join(",");
        },
        send() {
            let categoryId;
            if (this.value == "请选择一级品类") {
                categoryId = 0;
            }
            if (this.value2 == "请选择二级品类") {
                categoryId = this.value;
            } else {
                categoryId = this.value2;
            }
            console.log(categoryId);
            let obj = {
                categoryId: categoryId,
                name: this.data.name,
                subtitle: this.data.subtitle,
                subImages: this.data.subImages,
                detail: this.data.detail,
                price: this.data.price,
                stock: this.data.stock,
                status: 1,
            };
            editShop(obj).then((res) => {
                if (res.data.status == 0) {
                    alert(res.data.data);
                    this.$router.push("/shop/index");
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
h1 {
    font-weight: normal;
}
.el-form {
    width: 80%;
}
/deep/ {
    .el-select {
        margin-right: 10px;
    }
    .el-form-item {
        .el-image {
            width: 80px;
            height: 80px;
            margin: 0 10px;
            vertical-align: middle;
        }
    }
    .el-form-item:last-child {
        margin-top: 130px;
        .el-button {
            width: 50%;
            display: block;
            margin: 30px auto;
        }
    }
}
.img {
    display: flex;
    /deep/ {
        .img-item {
            position: relative;
        }
        span {
            position: absolute;
            right: 10px;
            top: 0px;
            background-color: #fff;
            font-size: 26px;
            cursor: pointer;
        }
    }
}
</style>